<template>
    <h2>用户列表</h2>
  <!-- table组件 -->
    <el-table :data="userList" stripe style="width: 100%">
      <el-table-column prop="id" label="用户编号" width="180"/>
      <el-table-column prop="uname" label="用户名" width="180"/>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column prop="edu" label="学历"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="title" label="部门"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
            <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除
          </el-button>
          <el-button link type="primary" size="small" @click="showUserDialog(scope.row)">修改
          </el-button>
        </template>
      </el-table-column>
  
    </el-table>
    <hr/>
    <el-pagination
        small
        background
        :page-size="3"
        :pager-count="10"
        layout="prev, pager, next"
        :total="total"
        class="mt-4" @current-change="handlerPageChange"/>
  <!-- page分页组件 -->

  <!-- 添加用户信息对话框 -->
  <el-dialog
      v-model="dialogUserVisible"
      width="80%"
  >
    <h2>修改客户信息</h2>

    <!-- 对话框中添加form -->
    <el-form :model="userForm" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="userForm.uname" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="userForm.phone" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="学历">
        <el-input v-model="userForm.edu" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="userForm.age" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="userForm.title" style="width: 80%"/>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="userForm.rids"
                   placeholder="请选择部门...."
                   style="width: 80%"
                    multiple>
          <el-option v-for=" opt in optRoles" :label="opt.rname"
                     :value="opt.id"
                      :key="opt.id"/>

        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="subUpdateCustForm">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
  </template>
  
  <script setup>
  
  
  import {onMounted, ref,reactive} from "vue";
    import axios from "axios";
    //声明user列表集合数据
    const userList=ref([]);
    //声明总记录数
    const total=ref(0);
    //声明变量保存添加用户信息和更新用户信息的url
    var url=""
    //定义函数发送请求加载用户列表
    function queryUserList(pageNum){
      axios.get("http://localhost:8081/userList?pageNum="+pageNum)
      .then((response)=>{
        userList.value=response.data.userList;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
      })
    }
    //加载调用函数
    onMounted(function(){
      queryUserList(1);
    });
    //定义分页按钮回调函数
    function handlerPageChange(pageNum){
      //调用分页查询函数
      queryUserList(pageNum);
    }

      /////////////////////////////添加用户信息/////////////////////////////////
  //定义添加用户信息对话框状态
  const dialogUserVisible=ref(false);
  //声明表单数据
  const userForm=reactive({
    uname:'',
    phone:'',
    age:'',
    edu:'',
    title:'',
    rids:[]
  });
  //声明角色的集合
  const optRoles=ref([]);
  function openUserDialog(){
    dialogUserVisible.value=true;
    url="http://localhost:8081/saveUser";//保存用户接口的url
    //发送ajax请求加载所有角色信息
    axios.get("http://localhost:8081/loadAllRoles")
    .then((response)=>{
      optRoles.value=response.data;
    })
    .catch((error)=>{
      console.log(error);
    })
  }


   ////////////////////////////保存用户信息/////////////////////////////
   function subUserForm(){
    axios.post(url,userForm)
    .then((response)=>{
      if(response.data.code==200){
        //关闭对话框
        dialogUserVisible.value=false;
      }
      ElMessage(response.data.msg);
    })
    .catch((error)=>{
      console.log(error);
    });
  }

   //打开对话框实现用户信息回显
   function showUserDialog(row){
    dialogUserVisible.value=true;
       //url赋值为更新用户信息接口的地址
       url="http://localhost:8081/updateUser"
    //将row赋值给userForm表单
    userForm.id=row.id;
    userForm.age=row.age;
    userForm.id=row.id;
    userForm.edu=row.edu;
    userForm.uname=row.uname;
    userForm.phone=row.phone;
    userForm.title=row.title;
    //加载下拉列表框所有角色信息
    axios.get("http://localhost:8081/loadAllRoles")
        .then((response)=>{
          optRoles.value=response.data;
          //发送ajax请求，加载某个用户所有角色信息
          axios.get("http://localhost:8081/queryUserRids/"+row.id)
          .then((response=>{
            //将响应的角色id的集合赋值给表单的数组
            userForm.rids=response.data;
          }));

        })
        .catch((error)=>{
          console.log(error);
        })

  }
    //定义函数发送请求
    function deleteUser(id){
    axios.get("http://localhost:8081/delUser/"+id)
    .then((response)=>{
      if(response.data.code==200){
        queryUserList(1);//刷新列表
      }
      ElMessage(response.data.msg);
    }).catch((error)=>{
      console.log(error);
    })
  }
  </script>
  
  <style scoped>
  
  </style>